<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jquery 发送ajax请求</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
    <script src="../static/jquery-3.6.1.min.js"></script>
</head>
<body>
<!--使用jquery 发送ajax请求-->
<div>
    <label>账号:
        <input id="i1" type="text" name="account" placeholder="请输入账号">
    </label>
</div>
<div>
    <label>密码:
        <input id="i2" type="password" name="pwd" placeholder="请输入密码">
    </label>
</div>
<div>
    <label>
        <input id="i3" type="button" value="登录" onclick="login()">
    </label>
</div>

<script>

//    jquery发送ajax请求
    function login() {
        let acc = $("[name='account']").val()
        let pwd = $("[name='pwd']").val()
        let body = {"account": acc, "pwd": pwd}

        //        $.ajax({请求相关的信息, success,error})
        $.ajax({
            "type": "post",
            "url": "http://127.0.0.1:5000/api/login",
            "dataType": "json",
            //期望服务器返回的数据类型
            "contentType": "application/json",
            //发送请求的数据类型
            "data": JSON.stringify(body),
            success: function(data){ // 这里的data，是服务器成功响应返回的数据
                alert(`接口返回的数据是${JSON.stringify(data)}`)
                console.log(data)},
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败
                console.log("请求失败");
                console.log(jqXHR);  // 通常包含错误信息，状态码等
                console.log(textStatus); // 表示请求的状态;
                console.log(errorThrown);} // 表示对错误的描述。通常会显示一个错误的详细描述
        })
    }
</script>
</body>
</html>